<template>
	<view>
		<view class="form">
			<view class="form-item">
				<view class="form-item-label">家谱名称</view>
				<view class="form-item-rig">
					<view class="form-item-input">
						<input type="text" placeholder="请输入家谱名称" placeholder-class="input-ac" v-model="form.name" />
					</view>
				</view>
			</view>
			<view class="form-item">
				<view class="form-item-label">家谱封面</view>
				<view class="form-item-rig">
					<view class="Cover">
						<view :class="form.img === index ? 'Cover-item Cover-item-ac' : 'Cover-item'"
							v-for="(it,index) in imgs" @click="setFormValue('img',index)">
							<image :src="mixiImgUrl + it" mode=""></image>
							<view class="Cover-item-tx">
								<view v-for="item in form.name">{{item}}</view>
							</view>
						</view>
					</view>
				</view>
			</view>
			<view class="form-item">
				<view class="form-item-label">堂号</view>
				<view class="form-item-rig">
					<view class="form-item-input">
						<input type="text" placeholder="请输入堂号" placeholder-class="input-ac" v-model="form.hall_num" />
					</view>
				</view>
			</view>
			<view class="form-item">
				<view class="form-item-label">地址</view>
				<view class="form-item-rig">
					<view class="form-item-input">
						<input type="text" placeholder="请输入地址" placeholder-class="input-ac" v-model="form.address" />
					</view>
				</view>
			</view>
			<view class="form-item">
				<view class="form-item-label">创建时间</view>
				<view class="form-item-rig">
					<view class="form-item-input">
						<input type="text" placeholder="请输入家谱创建时间" placeholder-class="input-ac"
							v-model="form.create_time" />
					</view>
				</view>
			</view>
			<view class="form-item">
				<view class="form-item-label">第一始祖</view>
				<view class="form-item-rig">
					<view class="form-item-input">
						<input type="text" placeholder="请输入始祖谱名" placeholder-class="input-ac" v-model="form.ancestry" />
					</view>
				</view>
			</view>
			<view class="form-item">
				<view class="form-item-label">始祖简介</view>
				<view class="form-item-rig">
					<view class="form-item-rig-textareaImg">
						<textarea placeholder="请输入始祖简介" placeholder-class="textarea-ac"
							v-model="form.ancestry_detail"></textarea>
						<view class="form-item-rig-textareaImg-img">
							<view class="form-item-rig-textareaImg-img-add flex-center" @click="upload('ancestry_img')"
								v-if="!form.ancestry_img">
								<image src="/static/photo-b-照相.png" mode=""></image>
								上传图片
							</view>
							<image :src="form.ancestry_img" mode="" v-else></image>
						</view>
					</view>
				</view>
			</view>
			<view class="form-item">
				<view class="form-item-label">家规家训</view>
				<view class="form-item-rig">
					<view class="form-item-input">
						<input type="text" placeholder="请输入家规家训" placeholder-class="input-ac"
							v-model="form.family_rules" />
					</view>
				</view>
			</view>
			<view class="form-item">
				<view class="form-item-label">前言</view>
				<view class="form-item-rig">
					<view class="form-item-input">
						<input type="text" placeholder="请输入前言" placeholder-class="input-ac" v-model="form.foreword" />
					</view>
				</view>
			</view>
			<view class="form-item">
				<view class="form-item-label">家起源</view>
				<view class="form-item-rig">
					<view class="form-item-rig-textareaImg">
						<textarea placeholder="请输入家起源" placeholder-class="textarea-ac"
							v-model="form.family_origin"></textarea>
						<view class="form-item-rig-textareaImg-img">
							<view class="form-item-rig-textareaImg-img-add flex-center"
								@click="upload('family_origin_img')" v-if="!form.family_origin_img">
								<image src="/static/photo-b-照相.png" mode=""></image>
								上传图片
							</view>
							<image :src="form.family_origin_img" mode="" v-else></image>
						</view>
					</view>
				</view>
			</view>
			<view class="form-item">
				<view class="form-item-label">发展历程</view>
				<view class="form-item-rig">
					<view class="development">
						<view class="development-list">
							<view class="development-l">
								<input type="text" placeholder="输入年份" placeholder-class="development-l-ac"
									v-model="develop_list.key" />
							</view>
							<view class="development-r">
								<input type="text" placeholder="· 输入事件描述" placeholder-class="development-l-ac"
									v-model="develop_list.value" @confirm="confirm" />
							</view>
						</view>
						<view class="development-list" v-for="it in form.develop_list">
							<view class="development-l">
								{{it.key}}
							</view>
							<view class="development-r">
								· {{it.value}}
							</view>
						</view>

					</view>
				</view>
			</view>
		</view>
		<view class="form-btn flex-center" @click="submit">下一步</view>
		<u-gap :height="15"></u-gap>
	</view>
</template>

<script>
	import {
		uploadImg
	} from '@/common/upload.js'
	import {
		genealogyCreateHttp
	} from '@/common/http/api.js'
	const config = require('@/common/config.js')
	export default {
		data() {
			return {
				form: {
					name: '',
					img: 0,
					hall_num: '',
					address: '',
					ancestry: '',
					ancestry_detail: '',
					ancestry_img: '',
					family_rules: '',
					foreword: '',
					family_origin: '',
					family_origin_img: '',
					create_time: '',
					develop_list: [
						// {
						// 	key: '',
						// 	value: ''
						// }
					]
				},
				imgs: [
					'/static/lan.png',
					'/static/qiing.png',
					'/static/huang.png',
					'/static/hong.png'
				],
				develop_list: {
					key: '',
					value: ''
				}
			}
		},
		methods: {
			setFormValue(name, value) {
				this.form[name] = value
			},
			upload(name) {
				uploadImg().then(res => {
					console.log('res', res)
					this.form[name] = res.data.url
				})
			},
			async confirm() {
				await this.$mValidate(
					[{
						require: true,
						key: 'key',
						message: '请输入年份'
					}, {
						require: true,
						key: 'value',
						message: '请输入描述'
					}], this.develop_list)
				this.form.develop_list.push({
					key: this.develop_list.key,
					value: this.develop_list.value
				})
				this.develop_list.key = ''
				this.develop_list.value = ''
			},
			async submit() {
				await this.$mValidate(
					[{
						require: true,
						key: 'name',
						message: '请输入家谱名称'
					}, {
						require: true,
						key: 'img',
						message: '请选择家谱封面'
					}, {
						require: true,
						key: 'address',
						message: '请输入地址'
					},], this.form)
				console.log('this.form', this.form)
				uni.showLoading()
				let data = this.form
				data.img = config.imgUrl + `/family/0${data.img + 1}.png`
				genealogyCreateHttp(data).then(res => {
					uni.hideLoading()
					uni.showToast({
						title: "创建成功！",
						icon: 'none'
					})
					setTimeout(() => {
						uni.navigateBack()
					}, 1500)
				})
			}
		}
	}
</script>

<style lang="scss">
	page {
		background: #F6F1E7;
	}

	.form {
		width: 670rpx;
		margin: 0 auto;
		padding: 30rpx 0;

		.form-item {
			width: 100%;
			margin-bottom: 57rpx;

			.form-item-label {
				font-family: Source Han Sans CN;
				font-weight: 400;
				font-size: 28rpx;
				color: #222222;
				margin-bottom: 30rpx;

			}

			.form-item-rig {
				width: 100%;

				.form-item-input {
					width: 100%;
					height: 84rpx;
					background: #D9CEBC;
					border-radius: 10rpx;
					box-sizing: border-box;
					padding: 0 30rpx;

					input {
						width: 100%;
						height: 100%;

						align-items: center;
						font-family: Source Han Sans CN;
						font-weight: 500;
						font-size: 28rpx;
						color: rgba(132, 100, 59, 0.5);

					}

					.input-ac {
						font-family: Source Han Sans CN;
						font-weight: 500;
						font-size: 28rpx;
						color: #84643B;
					}
				}

				.Cover {
					width: 100%;
					display: flex;
					justify-content: space-between;

					.Cover-item {
						width: 156rpx;
						height: 212rpx;
						background: #FFFFFF;
						border-radius: 8rpx;
						border: 1px solid #D9CEBC;
						box-sizing: border-box;
						padding: 20rpx 15rpx;
						position: relative;

						.Cover-item-tx {
							width: 16rpx;
							position: absolute;
							right: 32rpx;
							bottom: 88rpx;
							height: 90rpx;
							overflow: hidden;

							view {
								height: 82rpx;
								font-family: FZXuanZhenZhuanBianS-R-GB;
								font-weight: 400;
								font-size: 16rpx;
								color: #2B3858;
								height: fit-content;
							}
						}
					}

					.Cover-item-ac {
						background: #D9CEBC;
						border-radius: 8rpx;
						border: 1px solid #84643B;
					}
				}

				.form-item-rig-textareaImg {
					width: 100%;
					background: #D9CEBC;
					border-radius: 10rpx;
					box-sizing: border-box;
					padding: 30rpx 29rpx 19rpx;

					textarea {
						font-family: Source Han Sans CN;
						font-weight: 400;
						font-size: 28rpx;
						color: rgba(132, 100, 59, 0.5);
						height: 140rpx;
						margin-bottom: 10rpx;
					}

					.textarea-ac {
						font-family: Source Han Sans CN;
						font-weight: 400;
						font-size: 28rpx;
						color: #84643B;
					}

					.form-item-rig-textareaImg-img {
						width: 100%;

						.form-item-rig-textareaImg-img-add {
							width: 174rpx;
							height: 174rpx;
							background: #D9CEBC;
							border-radius: 10rpx;
							border: 1px solid #84643B;
							flex-direction: column;

							image {
								width: 37rpx;
								height: 29rpx;
								margin-bottom: 30rpx;
							}

							font-family: Source Han Sans CN;
							font-weight: 400;
							font-size: 24rpx;
							color: #84643B;
						}

						&>image {
							width: 174rpx;
							height: 174rpx;
							border-radius: 10rpx;
						}
					}
				}

				.development {
					width: 100%;
					position: relative;

					.development-list {
						width: 100%;
						display: flex;
						align-items: center;
						margin-bottom: 30rpx;

						.development-l {
							width: 120rpx;
							font-family: Source Han Sans CN;
							font-weight: 500;
							font-size: 36rpx;
							color: #84643B;
							margin-right: 30rpx;
							position: relative;

							input {
								background: #EFE9DD;
								border-radius: 8rpx;
								font-family: Source Han Sans CN;
								font-weight: 400;
								font-size: 24rpx;
								color: rgba(132, 100, 59, 0.5);
								width: 63%;
								padding: 10rpx;
							}

							.development-l-ac {
								color: #84643B;
								font-size: 19rpx;
							}
						}

						.development-l::after {
							width: 12rpx;
							height: 12rpx;
							background: #FFFFFF;
							border-radius: 50%;
							border: 1px solid #84643B;
							content: "";
							position: absolute;
							right: -6rpx;
							top: calc(50% - 10rpx);
							transform: rotateY(-50%);
							margin: auto;
							z-index: 9;
						}

						.development-r {
							width: 388rpx;
							background: #EFE9DD;
							border-radius: 8rpx;
							box-sizing: border-box;
							padding: 15rpx 23rpx;
							font-family: Source Han Sans CN;
							font-weight: 800;
							font-size: 24rpx;
							color: #666666;
							display: flex;

							input {
								font-size: 24rpx;
							}
						}
					}
				}

				.development::after {
					width: 1rpx;
					height: 100%;
					position: absolute;
					content: "";
					left: 118rpx;
					top: 0;
					background: #84643B;
				}
			}
		}
	}

	.form-btn {
		width: 580rpx;
		height: 99rpx;
		background: #84643B;
		border-radius: 50rpx;
		font-family: Source Han Sans CN;
		font-weight: 500;
		font-size: 32rpx;
		color: #FFFFFF;
		margin: 0 auto;
	}
</style>